<template>
  <div class="base-form">
    <el-form :inline="props.formConfig.isInline" :label-width="props.formConfig.labelWidth">
      <template v-for="item in props.formConfig.formItems">
          <el-form-item :label="item.label" :props="item.field">
            <!-- 输入框 -->
            <template v-if="item.type === 'input' || item.type === 'password'">
              <el-input v-model="modelValue[`${item.field}`]" :style="item.customStyle" @update:modelValue="valueChange($event, item.field)" :placeholder="item.placeholder" :show-password="item.type === 'password'" :clearable="item.clearable"/>
            </template>
            <!-- 下拉框 -->
            <template v-else-if="item.type === 'select'">
              <el-select v-model="modelValue[`${item.field}`]" @update:modelValue="valueChange($event, item.field)" :placeholder="item.placeholder" :clearable="item.clearable" :multiple="item.multiple">
                <el-option v-for="option in item.optionsData" :key="option.value" :label="option.label" :value="option.value" />
              </el-select>
            </template>
            <!-- 日期选择器 -->
            <template v-else-if="item.type === 'datePicker'">
              <el-date-picker v-model="modelValue[`${item.field}`]" @update:modelValue="valueChange($event, item.field)" type="date" :placeholder="item.placeholder" :clearable="item.clearable"/>
            </template>
            <!-- 时间日期选择器 -->
            <template v-else-if="item.type === 'dateTime'">
              <el-date-picker v-model="modelValue[`${item.field}`]" @update:modelValue="valueChange($event, item.field)" type="datetime" :placeholder="item.placeholder" :clearable="item.clearable"/>
            </template>
            <!-- switch -->
            <template v-else-if="item.type === 'switch'">
              <el-switch v-model="modelValue[`${item.field}`]" @update:modelValue="valueChange($event, item.field)" :style="item.switchStyle"/>
            </template>
            <template v-else-if="item.type === 'checkBox'">
              <el-checkbox-group v-model="modelValue[`${item.field}`]" @update:modelValue="valueChange($event, item.field)">
                <el-checkbox v-for="option in item.optionsData" :label="option.label" />
              </el-checkbox-group>
            </template>
          </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script setup>
import { reactive,defineProps,defineEmits } from "vue"
const props = defineProps({
  formConfig: {
    type: Object,
    default(){
      return {

      }
    }
  },
  modelValue: {
    type: Object,
    default(){
      return {}
    }
  },
})

const emits = defineEmits(["update:modelValue"])
const valueChange = (value,field) => {
  emits('update:modelValue', { ...props.modelValue, [field]: value })
}
</script>

<style lang="scss" scoped></style>
